<template>
  <div class="market">
    <el-row :gutter="20" style="margin-left: 3px;">
      <el-col :span="11">
        <el-card class="box-card" style="">
          <div slot="header" class="clearfix">
            <span class="card-title">当前碳资产</span>
          </div>
          <div>
            <ECharts style="height: 303px;" ref="chart" :option="curAsserts"/>
          </div>
        </el-card>
      </el-col>
      <el-col :span="13">
        <el-col :span="12">
          <el-card class="box-card" style="margin-bottom: 20px;">
            <div slot="header" class="clearfix">
              <span class="card-title">本年度CCER总量（t）</span>
            </div>
            <img src="@/assets/病毒.png" alt="" class="img_size">
            <div style="float:right;">
              <span style="font-size: 5vh;font-weight: lighter;">3</span>
            </div>
          </el-card>
          <el-card class="box-card" style="margin-bottom: 20px;">
            <div slot="header" class="clearfix">
              <span class="card-title">本年度配额总量（t）</span>
            </div>
            <img src="@/assets/花.png" alt="" class="img_size">
            <div style="float:right;">
              <span style="font-size: 5vh;font-weight: lighter;">3</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card class="box-card" style="margin-bottom: 20px;">
            <div slot="header" class="clearfix">
              <span class="card-title">年度政府发放配额（t）</span>
            </div>
            <img src="@/assets/尿液.png" alt="" class="img_size">
            <div style="float:right;">
              <span style="font-size: 5vh;font-weight: lighter;">3</span>
            </div>
          </el-card>
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span class="card-title">应清缴碳配额（t）</span>
            </div>
            <img src="@/assets/叶.png" alt="" class="img_size">
            <div style="float:right;">
              <span style="font-size: 5vh;font-weight: lighter;">3</span>
            </div>
          </el-card>
        </el-col>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card class="box-card" style="margin-left: 13px;">
          <div slot="header" class="clearfix">
            <span class="card-title">碳资产与实际排放对比</span>
          </div>
          <ECharts style="height: 38vh;float:right;" ref="chart" :option="chart1"/>
          <ECharts style="height: 38vh;" ref="chart" :option="chart1"/>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card" style="margin-right: 10px">
          <div slot="header" class="clearfix">
            <span class="card-title">碳资产交易对比</span>
          </div>
          <ECharts style="height: 38vh;" ref="chart" :option="chart2"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>

import {editTarget, enableTarget, queryTargetPage, unEnableTarget} from "@/api/carbon-manage/target";
import {listStage} from "@/api/carbon-manage/data";
import {queryAllProcess} from "@/api/carbon-manage/process";

export default {
  data() {
    return {
      curAsserts: {
        tooltip: {
          trigger: 'item'
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        legend: {
          top: '5%',
          left: 'left',
          orient: 'vertical'
        },
        series: [
          {
            name: '碳资产',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: false,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 1048, name: '配额'},
              {value: 35, name: 'CCER'},
            ]
          }
        ]
      },
      chart1: {
        legend: {},
        tooltip: {},
        dataset: {
          dimensions: ['product', '年度累计碳排放量（t）', '当前可用CCER（t）', '当前可用碳配额（t）'],
          source: [
            { product: '碳资产与实际排放对比', '年度累计碳排放量（t）': 43.3, '当前可用CCER（t）': 85.8, '当前可用碳配额（t）': 93.7 },
          ]
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: { type: 'category' },
        yAxis: {},
        series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
      },
      chart2: {
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '碳资产买入',
            type: 'line',
            stack: 'Total',
            data: [120, 132, 101, 134, 90, 230, 210]
          },
          {
            name: '碳资产卖出',
            type: 'line',
            stack: 'Total',
            data: [220, 182, 191, 234, 290, 330, 310]
          }
        ]
      }

    }
  },
  mounted() {
    this.loadData();
  },
  methods: {
    loadData() {
    },
  },

}
</script>

<style scoped lang="scss">
.market {
  margin: 10px;
}

.card-title {
  font-family: 微软雅黑;
  font-weight: bolder;
}

.img_size {
  width: 10vh;
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
